<template>
	<view class="container">
		<view class="container-carousel">
			<IndexSwiper :dataList="swiperList" />
		</view>

		<view class="container-banner">
			<view style="margin-left: 24rpx; padding-top: 60rpx; display: flex;">
				<view class="container-banner-tag" v-for="(item, index) of currentTotalNum" :key="index">
					{{ item }}
				</view>
			</view>
		</view>

		<view class="container-aside">
			<view class="container-aside-title">优惠项目</view>
			<view class="container-aside-text">设备信息 {{ device_id || '(请微信扫码获取)' }}</view>
		</view>
		<!-- https://kangxi.banbanxiaxia.cn/upload/1/common/images/20240701/20240701030324171981740434026.png -->
		<!-- https://kangxi.banbanxiaxia.cn/upload/1/common/images/20240701/20240701030324171981740435359.png -->
		<view class="container-card">
			<view class="container-card-item" v-for="(item, index) of goodsList" :key="index" @click="openShow(item)">
				<view class="container-card-item-img">
          <image :src="item.goods_image"mode="aspectFill"></image>
				</view>
				<view class="container-card-item-title">
					{{ item.goods_name  }}{{ item.introduction  }}
					<view class="container-card-item-tag">
						&yen;{{ item.price }}
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="showPopup" @close="showPopup = false" @open="open" closeable>
			<view class="popup-title">
				付款确认
			</view>
			<view class="popup-cell">
				<view class="popup-cell-left">价格</view>
				<view class="popup-cell-left">{{ cardObj.price }}</view>
			</view>
			<view class="popup-cell">
				<view class="popup-cell-left">付款方式</view>
				<view class="popup-cell-left">微信支付</view>
			</view>
			<view class="popup-cell">
				<view class="popup-cell-left">康烯(会员卡)剩余次数</view>
				<view class="popup-cell-left">{{userInfo.number_times ? userInfo.number_times : '0'}}次</view>
			</view>
			<view class="popup-protocol">
				<u-checkbox-group v-model="checkedVal">
					<u-checkbox activeColor="#FF8732" label="已仔细阅读并自愿接受全部告知事项" labelSize="28" shape="circle" size="52"
						iconSize="42" labelColor="#FF8732" name="1"></u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="popup-btn" @click="startPower"> 立即开机 </view>
		</u-popup>
		<Tabbar cureentPage='index'></Tabbar>
	</view>
</template>

<script>
	import request from "../../api/request";
	import IndexSwiper from '@/components/index/IndexSwiper.vue'
	import Tabbar from '@/components/common/Tabbar.vue'
	export default {
		components: {
			IndexSwiper,
			Tabbar
		},
		data() {
			return {
				swiperList: [],
				goodsList: [],
				showPopup: false,
				checkedVal: ['1'],
				token: null,
				device_id: '',
				userInfo: null,
				q: null,
				currentGoodsId: null,
				cardObj: null,
				allNumberTimer: null,
				currentTotalNum: []
			}
		},
		onLoad(query) {
			this.q = decodeURIComponent(query.q);
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"],
				title: '康稀生活',
				path: '/pages/index/index'
			})
			//this.q = 'http://kx.taipingkeji.com/kx/index/jumpUrl/device_id/869734050395866'
			if (this.q) {
				this.getDeviceIdFromScanCode();
			}
			this.getSwiperData()
			this.getLoginCode()
		},
		onShow() {
			const temp = uni.getStorageSync('userInfo') || '{}'
			this.userInfo = JSON.parse(temp);
			this.getTokenAndDeviceId()
			this.getPackage()
			request({
				url: '/kx/index/serviceQuantity',
				// data: { id: 1 },
				successCb: (res) => {
					this.currentTotalNum = []
					let temp = res.data + ''
					if (temp.length < 10) {
						let num = 10 - temp.length
						for (let i = 0; i < num; i++) {
							this.currentTotalNum.push('0')
						}
					}
					this.currentTotalNum = [...this.currentTotalNum, ...temp]
				},
				failCb: () => {
					uni.$u.toast('系统繁忙')
				}
			});
			this.allNumberTimer = setInterval(() => {
				this.currentTotalNum = []
				request({
					url: '/kx/index/serviceQuantity',
					// data: { id: 1 },
					successCb: (res) => {
						let temp = res.data + ''
						if (temp.length < 10) {
							let num = 10 - temp.length
							for (let i = 0; i < num; i++) {
								this.currentTotalNum.push('0')
							}
						}
						this.currentTotalNum = [...this.currentTotalNum, ...temp]
					},
					failCb: () => {
						uni.$u.toast('系统繁忙')
					}
				});
			}, 1000 * 60 * 10)
		},
		onUnload() {
			clearInterval(this.allNumberTimer)
		},
		methods: {
			startPower() {
				const that = this
				if (!this.token) {
					uni.showToast({
						title: '请先登录',
						icon: 'none',
						duration: 1000
					});
					setTimeout(() => {
						uni.redirectTo({
							url: '../login/login'
						});
					}, 1000);
					return;
				}
				if (this.checkedVal[0] !== '1') {
					uni.showToast({
						title: '请先勾选已知晓协议',
						icon: 'none',
						duration: 1000
					});
					return;
				}
				if (!this.device_id) {
					uni.showToast({
						title: '请先扫码获取设备信息',
						icon: 'none',
						duration: 1000
					});
					return;
				}
				uni.showLoading({
						title: "开机中..."
					}),
					request({
						url: '/kx/index/power',
						data: {
							token: that.token,
							device_id: that.device_id
						},
						successCb: (res) => {
							uni.hideLoading();
							that.isShow = false
							uni.$u.toast('开机成功')
							that.getUserInfo()

						},
						failCb: (err) => {
							uni.$u.toast('未知错误请联系客服')
						}
					});
				setTimeout(() => {
					uni.hideLoading();
				}, 5000);
			},

			getUserInfo() {
				const that = this
				request({
					url: '/kx/index/getUserInfo',
					data: {
						token: that.token
					},
					successCb: (res) => {
						that.userInfo = res.data.data;
						// 保存用户信息
						uni.setStorageSync('userInfo', JSON.stringify(that.userInfo))
					},
				});
			},
			getDeviceIdFromScanCode() {
				const parts = this.q.split('/');
				let device_id;

				for (let i = 0; i < parts.length; i++) {
					if (parts[i] === 'device_id') {
						let device_id = parts[i + 1];
						uni.setStorageSync('device_id', device_id); // 将设备 ID 存储到本地缓存中
						this.device_id = device_id
						break; // 找到设备 ID 后跳出循环
					}
				}
			},
			openShow(val) {
				this.showPopup = true
				this.currentGoodsId = val.goodsId
				this.cardObj = val
			},
			getTokenAndDeviceId() {
				this.token = uni.getStorageSync('token') || '';
				this.device_id = uni.getStorageSync('device_id') || '';
			},
			open() {},
			getPackage() {
				request({
					url: '/kx/index/getPackage',
					successCb: (res) => {
            console.log('getPackage: ', res)
						this.goodsList = res.data || [];
					},
				});
			},
			getSwiperData() {
				request({
					url: '/kx/index/getBanner',
					// data: { id: 1 },
					successCb: (res) => {
						this.swiperList = res.data || [];
            console.log('res',res);
					},
				});
			},
			getLoginCode() {
				uni.login({
					provider: 'weixin', //使用微信登录
					success: function(loginRes) {
						request({
							url: '/kx/index/getOpenid',
							data: {
								code: loginRes.code
							},
							successCb: (res) => {
								console.log('数据结果：', res);
								uni.setStorageSync('openid', res.data);
							},
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background: #F3F3F3;

		&-carousel {
			width: 100%;
			height: 440rpx;

			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		&-banner {
			width: 670rpx;
			height: 140rpx;
			margin: 40rpx auto;
			background: url("https://kangxi.banbanxiaxia.cn/upload/1/common/images/20240607/20240607020154171774011454189.png") no-repeat;
			background-size: 100%;
      
			&-tag {
				width: 40rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				margin: 0 4rpx;
				background: url("../../static/kuai.png") no-repeat;
				background-size: 100%;
			}
		}

		&-aside {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			margin: 0 30rpx;
			background: #fff;
			border-radius: 10rpx;

			&-title {
				font-weight: 700;
				font-size: 24rpx;
				color: #FF4343;
			}

			&-text {
				font-size: 20rpx;
				color: #3D3D3D;
			}
		}

		&-card {
			display: flex;
			margin: 20rpx;

			&-item {
				margin: 15rpx;
				width: 700rpx;
				height: 528rpx;
				border-radius: 20rpx;

				&-img {
					width: 324rpx;
					height: 616rpx;

					image {
						width: 100%;
						height: 100%;
						background-size: 100%;
						border-radius: 20rpx 20rpx 0rpx 0rpx;
					}
				}

				&-tag {
					position: absolute;
					right: 0;
					top: -20rpx;
					width: 108rpx;
					height: 38rpx;
					background: linear-gradient(90deg, #FF8732 0%, #FFB65E 100%);
					border-radius: 120rpx 0rpx 0rpx 120rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #fff;
					text-align: center;
					line-height: 38rpx;
				}

				&-title {
					position: relative;
					height: 60rpx;
					background: #fff;
					border-radius: 0rpx 0rpx 20rpx 20rpx;
					font-size: 24rpx;
					padding-left: 20rpx;
					font-weight: 500;
					color: #3D3D3D;
					line-height: 60rpx;
				}
			}

		}
	}

	.popup-title {
		padding: 24rpx;
		color: #3d3d3d;
		font-weight: bold;
		font-size: 30rpx;
	}

	.popup-cell {
		display: flex;
		justify-content: space-between;
		padding: 12rpx 24rpx;
		color: #3D3D3D;
		font-size: 28rpx;
	}

	.popup-protocol {
		margin: 12rpx 24rpx;
	}

	.popup-btn {
		width: 380rpx;
		height: 70rpx;
		background: linear-gradient(90deg, #FF8732 0%, #FFB65E 100%);
		line-height: 70rpx;
		text-align: center;
		color: #fff;
		border-radius: 50rpx;
		margin: 24rpx auto;
	}
</style>